{extend name="public/container"}
{block name="head_top"}
<style type="text/css">
.top-icon-father {
    padding: 20px 0;
    border-bottom: 1px solid var(--borderColor);
}
.el-input-number {width: 100px}
</style>
{/block}
{block name="content"}
<div id="myApp" v-cloak>
    <div class="douxue-title">
        <h5 class="title">用户详情</h5>
        <div class="action">
            <el-button type="text" size="mini" @click="goBack()">返回</el-button>
        </div>
    </div>

    <div class="details-wrap">
        <el-tabs v-model="activeTab" type="border-card" tab-click="tabSwitch">
            <!-- 会员卡消费记录 -->
            <el-tab-pane label="会员卡消费记录" name="consume">
                <div class="flex flex-between flex-center top-icon-father">
                    <div class="flex flex-center">
                        <div class="flex flex-center top-icon">
                            <div class="flex flex-center" style="margin-right:10px">
                                <div>会员名：</div>
                            </div>
                            <div class="flex flex-center">
                                {{ user_info.full_name }}
                            </div>
                        </div>

                        <div class="flex flex-center top-icon">
                            <div class="flex flex-center" style="margin-right:10px">
                                <div>手机号：</div>
                            </div>
                            <div class="flex flex-center">
                                {{ user_info.mobile }}
                            </div>
                        </div>

                        <div class="flex flex-center top-icon">
                            <div class="flex flex-center" style="margin-right:10px">
                                <div>用户状态：</div>
                            </div>
                            <div class="number flex flex-center">
                                <el-link :underline="false" type="info" v-if="user_info.status==0">{{user_info.status_display}}</el-link>
                                <el-link :underline="false" type="success" v-else-if="user_info.status==1">{{user_info.status_display}}</el-link>
                                <el-link :underline="false" type="danger" v-if="user_info.status==2">{{user_info.status_display}}</el-link>
                            </div>
                        </div>

                        <div class="flex flex-center top-icon">
                            <div class="flex flex-center" style="margin-right:10px">
                                <div class="top-icon-wrap">
                                    <img src="{__FRAME_PATH}images/now_money.png" />
                                </div>
                                <div>充值金额：</div>
                            </div>
                            <div class="number">{{ user_info.now_money }}</div>
                        </div>

                        <div class="flex flex-center top-icon">
                            <div class="flex flex-center" style="margin-right:10px">
                                <div class="top-icon-wrap">
                                    <img src="{__FRAME_PATH}images/gift_money.png" />
                                </div>
                                <div>赠送金额：</div>
                            </div>
                            <div class="number">{{ user_info.gift_money }}</div>
                        </div>

                    </div>

                    <el-button size="small" type="primary" @click="returnCardDialogVisable=true" :disabled="user_info.status!=1">退卡</el-button>
                </div>

                <div class="douxue-filter mb-20" style="margin-bottom:20px">
                    <el-form :inline="true" :model="where" size="mini" class="flex">
                        <div class="flex flex-between">
                            <el-form-item>
                                <el-date-picker
                                    v-model="where.date_time"
                                    type="daterange"
                                    @change="dateRangeClick"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>

                <el-table
                    :data="rows"
                    style="width: 100%"
                    v-loading="loading"
                    show-summary
                    element-loading-text="加载中"
                    element-loading-spinner="el-icon-loading"
                    size="mini">
                    <el-table-column
                        type="expand"
                        align="left">
                        <template slot-scope="scope">
                            <el-table
                                :data="scope.row.items"
                                size="mini"
                                show-summary
                                style="100%">
                                <el-table-column
                                    prop="rel_name"
                                    label="条目名称"
                                    align="left">
                                </el-table-column>

                                <el-table-column
                                    prop="free_type"
                                    label="类型"
                                    align="left">
                                </el-table-column>

                                <el-table-column
                                    prop="qty"
                                    label="数量"
                                    align="left">
                                </el-table-column>

                                <el-table-column
                                    prop="disc_amt"
                                    label="折扣金额"
                                    align="left">
                                </el-table-column>

                                <el-table-column
                                    prop="amt"
                                    label="金额"
                                    align="left">
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="order_no"
                        label="订单编码"
                        width="160"
                        align="left">
                    </el-table-column>
                    <el-table-column
                        v-if="!disable_organ"
                        prop="organ_name"
                        label="所属{:lang('Organ')}"
                        align="left">
                    </el-table-column>
                    <el-table-column
                        v-if="!disable_school"
                        prop="school_name"
                        label="所属{:lang('School')}"
                        align="left">
                    </el-table-column>

                    <el-table-column
                        prop="create_time"
                        label="消费时间"
                        align="left">
                    </el-table-column>

                    <el-table-column
                        prop="pay_type_display"
                        label="支付方式"
                        align="left">
                    </el-table-column>

                    <el-table-column
                        prop="status_display"
                        label="状态"
                        align="left">
                    </el-table-column>

                    <el-table-column
                        prop="remark"
                        label="备注"
                        width="140"
                        align="left">
                    </el-table-column>

                    <el-table-column
                        prop="total_qty"
                        label="数量"
                        align="right">
                    </el-table-column>

                    <el-table-column
                        prop="order_amt"
                        label="金额"
                        align="right">
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination
                        hide-on-single-page
                        size="mini"
                        background
                        layout="prev, pager, next"
                        :total="rowsCount"
                        :page-size="where.limit"
                        @current-change="doLoadRows">
                    </el-pagination>
                </div>

                <!-- 退卡 -->
                <el-dialog title="编辑" :visible.sync="returnCardDialogVisable">
                    <el-form :model="returnCardFormData" ref="returnCardFormData" label-width="100px" size="mini">
                        <el-form-item label="剩余可退金额" prop="now_money">
                            <el-input :value="user_info.now_money" :disabled="true"></el-input>
                        </el-form-item>

                        <el-form-item label="剩余赠送金额" prop="gift_money">
                            <el-input :value="user_info.gift_money" :disabled="true"></el-input>
                        </el-form-item>

                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" show-word-limit maxlength="120" v-model="returnCardFormData.remark"></el-input>
                        </el-form-item>

                        <el-form-item v-if="returnCardConfirmStep==1">
                            <el-alert
                                title="此操作不可恢复，确定执行吗？"
                                type="warning"
                                show-icon
                                :closable="false"
                                effect="light">
                            </el-alert>
                        </el-form-item>

                        <el-form-item v-if="returnCardConfirmStep==3">
                            <el-alert
                                title="操作已完成"
                                type="success"
                                show-icon
                                :closable="false"
                                effect="light">
                            </el-alert>
                        </el-form-item>

                        <el-form-item v-if="returnCardConfirmStep < 3">
                            <el-button type="primary" size="small" v-if="returnCardConfirmStep==2" :loading="true">加载中...</el-button>
                            <el-button type="primary" size="small" v-else @click="doReturnCard()">确 定</el-button>
                        </el-form-item>
                    </el-form>

                    <template>

                    </template>
                </el-dialog>
            </el-tab-pane>

            <!-- 套餐消费记录 -->
            <el-tab-pane label="套餐消费记录" name="package">
                <div class="flex flex-between flex-center top-icon-father">
                    <div class="flex flex-center">
                        <div class="flex flex-center top-icon">
                            <div class="flex flex-center" style="margin-right:10px">
                                <div>会员名：</div>
                            </div>
                            <div class="flex flex-center">
                                {{ user_info.full_name }}
                            </div>
                        </div>

                        <div class="flex flex-center top-icon">
                            <div class="flex flex-center" style="margin-right:10px">
                                <div>手机号：</div>
                            </div>
                            <div class="flex flex-center">
                                {{ user_info.mobile }}
                            </div>
                        </div>

                        <div class="flex flex-center top-icon">
                            <div class="flex flex-center" style="margin-right:10px">
                                <div>用户状态：</div>
                            </div>
                            <div class="number flex flex-center">
                                <el-link :underline="false" type="info" v-if="user_info.status==0">{{user_info.status_display}}</el-link>
                                <el-link :underline="false" type="success" v-else-if="user_info.status==1">{{user_info.status_display}}</el-link>
                                <el-link :underline="false" type="danger" v-if="user_info.status==2">{{user_info.status_display}}</el-link>
                            </div>
                        </div>

                        <div class="flex flex-center top-icon">
                            <div class="flex flex-center" style="margin-right:10px">
                                <div class="top-icon-wrap">
                                    <img src="{__FRAME_PATH}images/total.png" />
                                </div>
                                <div>套餐总数：</div>
                            </div>
                            <div class="number">{{ user_info.pck_total_nums }}</div>
                        </div>

                        <div class="flex flex-center top-icon">
                            <div class="flex flex-center" style="margin-right:10px">
                                <div class="top-icon-wrap">
                                    <img src="{__FRAME_PATH}images/left.png" />
                                </div>
                                <div>总剩余套餐数：</div>
                            </div>
                            <div class="number">{{ user_info.pck_left_nums }}</div>
                        </div>

                        <div class="flex flex-center top-icon">
                            <div class="flex flex-center" style="margin-right:10px">
                                <div class="top-icon-wrap">
                                    <img src="{__FRAME_PATH}images/consume.png" />
                                </div>
                                <div>总消耗次数：</div>
                            </div>
                            <div class="number">{{ user_info.pck_consume_nums }}</div>
                        </div>

                    </div>

                    <el-button size="small" type="primary" @click="returnPackage()" :disabled="user_info.status!=1 || user_info.pck_left_nums == 0">退套餐</el-button>
                </div>

                <div class="douxue-filter mb-20" style="margin-bottom:20px">
                    <el-form :inline="true" :model="where" size="mini" class="flex">
                        <div class="flex flex-between">
                            <el-form-item>
                                <el-date-picker
                                    v-model="where.date_time"
                                    type="daterange"
                                    @change="dateRangeClick"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>

                <el-table
                    :data="rows"
                    style="width: 100%"
                    v-loading="loading"
                    show-summary
                    element-loading-text="加载中"
                    element-loading-spinner="el-icon-loading"
                    size="mini">
                    <el-table-column
                        type="expand"
                        align="left">
                        <template slot-scope="scope">
                            <el-table
                                :data="scope.row.items"
                                size="mini"
                                show-summary
                                style="100%">
                                <el-table-column
                                    prop="pck_name"
                                    label="套餐名称"
                                    align="left">
                                </el-table-column>

                                <el-table-column
                                    prop="rel_name"
                                    label="条目名称"
                                    align="left">
                                </el-table-column>

                                <el-table-column
                                    prop="free_type"
                                    label="类型"
                                    align="left">
                                </el-table-column>

                                <el-table-column
                                    prop="qty"
                                    label="数量"
                                    align="left">
                                </el-table-column>

                                <el-table-column
                                    prop="disc_amt"
                                    label="折扣金额"
                                    align="left">
                                </el-table-column>

                                <el-table-column
                                    prop="amt"
                                    label="金额"
                                    align="left">
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="order_no"
                        label="订单编码"
                        width="160"
                        align="left">
                    </el-table-column>
                    <el-table-column
                        v-if="!disable_organ"
                        prop="organ_name"
                        label="所属{:lang('Organ')}"
                        align="left">
                    </el-table-column>
                    <el-table-column
                        v-if="!disable_school"
                        prop="school_name"
                        label="所属{:lang('School')}"
                        align="left">
                    </el-table-column>

                    <el-table-column
                        prop="create_time"
                        label="消费时间"
                        align="left">
                    </el-table-column>

                    <el-table-column
                        prop="pay_type_display"
                        label="支付方式"
                        align="left">
                    </el-table-column>

                    <el-table-column
                        prop="status_display"
                        label="状态"
                        align="left">
                    </el-table-column>

                    <el-table-column
                        prop="remark"
                        label="备注"
                        width="140"
                        align="left">
                    </el-table-column>

                    <el-table-column
                        prop="total_qty"
                        label="数量"
                        align="right">
                    </el-table-column>

                    <el-table-column
                        prop="order_amt"
                        label="金额"
                        align="right">
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination
                        hide-on-single-page
                        size="mini"
                        background
                        layout="prev, pager, next"
                        :total="rowsCount"
                        :page-size="where.limit"
                        @current-change="doLoadRows">
                    </el-pagination>
                </div>

                <!-- 退套餐 -->
                <el-dialog title="编辑" :visible.sync="returnPackageDialogVisable" width="80%">
                    <el-table
                        ref="multipleTable"
                        :data="refundablePackageList"
                        tooltip-effect="dark"
                        @select="selectToRefund"
                        style="width: 100%"
                        >
                        <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column>

                        <el-table-column
                            label="套餐名称"
                            prop="pck_name"
                            >
                        </el-table-column>

                        <el-table-column
                            label="套餐类型"
                            prop="valid_type_display"
                            >
                        </el-table-column>

                        <el-table-column
                            label="总次数"
                            prop="total_nums"
                            >
                        </el-table-column>

                        <el-table-column
                            label="剩余次数"
                            prop="left_nums"
                            >
                        </el-table-column>

                        <el-table-column
                            label="购买价格"
                            prop="bought_price"
                            >
                        </el-table-column>

                        <el-table-column
                            label="退款金额"
                            prop="refund_amt"
                            >
                            <template slot-scope="scope">
                                <el-input-number size="mini" v-model="scope.row.refund_amt" :controls="false" :disabled="!scope.row.is_selected"></el-input-number>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pagination">
                        <el-pagination
                            hide-on-single-page
                            size="mini"
                            background
                            layout="prev, pager, next"
                            :total="rowsCount"
                            :page-size="where.limit"
                            @current-change="doLoadRows">
                        </el-pagination>
                    </div>

                    <div class="flex flex-center" style="width: 100%; margin:20px 0">
                        <div class="" style="width:80px">备注</div>
                        <el-input type="textarea" show-word-limit maxlength="300" v-model="refundPackageList.remark"></el-input>
                    </div>

                    <el-alert
                        v-if="refundPackageError!=''"
                        :title="refundPackageError"
                        :closable="false"
                        type="error"
                        show-icon
                        effect="light">
                    </el-alert>

                    <el-alert
                        v-if="refundPackageError===false"
                        title="操作成功"
                        :closable="false"
                        type="success"
                        show-icon
                        effect="light">
                    </el-alert>
                    <div slot="footer" class="dialog-footer" v-if="refundPackageError!==false">
                        <el-button size="small" type="primary" :loading="true" v-if="refundPackageLoading==true">处理中...</el-button>
                        <el-button size="small" type="primary" v-else @click="confirmRetuenPackage()">确认</el-button>
                    </div>
                </el-dialog>

            </el-tab-pane>
        </el-tabs>
    </div>

</div>
{/block}
{block name="script"}
<script>
    var uid = parseInt("{$uid}");
    var my = new Vue({
        el: "#myApp",
        data(){
            return {
                activeTab:'consume',
                dateRange:'',
                where:{
                    uid:uid,
                    date_time:'',
                    page:1,
                    limit:60
                },
                user_info:{},
                loading:false,
                rowsCount: 0,
                rows: [],
                organs: [],
                schools:[],
                disable_organ: default_org_id > 0 ? true : false,
                disable_school: default_school_id > 0 ? true : false,
                returnCardDialogVisable:false,
                returnCardConfirmStep:0,
                returnCardLoading:false,
                returnCardFormData:{
                    uid:uid,
                    remark:''
                },
                returnPackageDialogVisable:false,
                // 可退套餐列表
                refundablePackageList:[],
                // 选中的待退套餐
                refundPackageList:{
                    uid:uid,
                    packages:[],
                    remark:''
                },
                refundPackageError:'',
                refundPackageLoading:false,
                confirmFormData:{
                    order_id:0
                }
            }
        },
        methods: {
            goBack () {
                window.location.href = Url({a:'index'})
            },
            dateRangeClick (value) {
                this.doLoadRows()
            },
            // 用户数据获取
            doLoadUserView () {
                axios.get(Url({c:'user.user',a:'view' , q:{id:uid}}))
                .then(res => {
                    this.user_info = res.data.data
                })
            },
            // 退卡提交
            doReturnCard: async function () {
                this.returnCardConfirmStep++

                if ( this.returnCardConfirmStep == 1 ) {
                    return ;
                }

                let _confirmOrder = {
                    order_id:0
                }
                await axios.post(Url({c:'user.user',a:'returncard'}) , this.returnCardFormData)
                .then( res => {
                    if ( res.data.code == 200 ) {
                        _confirmOrder.order_id = res.data.data.order_id || 0
                    } else {
                        return this.$message.error(res.data.msg)
                    }
                })
                .catch(_ => {
                    console.log('catch')
                    console.log(_)
                });

                if ( _confirmOrder.order_id > 0 ) {
                    await axios.post( Url({c:'user.user',a:'returnconfirm'}) , _confirmOrder)
                    .then( res => {
                        if ( res.data.code == 200 ) {
                            this.returnCardConfirmStep = 3
                            this.doLoadUserView()
                        }
                    }).catch(_ => {
                        console.log('then')
                    })
                }
            },
            // 消费明细和套餐明细共用
            doLoadRows (page) {
                this.loading = true
                this.where.page  = page || 1

                let _c = 'user.user', _a = 'consume_bills';
                if ( this.activeTab == 'consume' ) {
                    _a = 'consume_bills';
                }

                if ( this.activeTab == 'package' ) {
                    _a = 'consume_packages';
                }

                axios.get(Url({c:_c,a:_a , q:this.where}))
                    .then(res => {
                        this.rows = res.data.data
                        this.rowsCount =res.data.count
                        this.loading = false
                    })
            },
            returnPackage ( ) {
                this.doLoadRefundablePackageList()
                this.returnPackageDialogVisable = true

            },
            doLoadRefundablePackageList () {
                axios.get(Url({c:'package.package',a:'refundable_list' , q:{uid:uid}}))
                .then(res => {
                    this.refundablePackageList = res.data.data
                })
            },
            // 选择需要退款的套餐
            selectToRefund (selection, row) {
                row.is_selected = true
                this.refundPackageList.packages = selection
            },
            // 确定提交退套餐申请
            async confirmRetuenPackage () {
                if ( this.refundPackageList.packages.length == 0 ) return this.refundPackageError = '至少选择一个套餐';

                this.refundPackageLoading = true
                await axios.post( Url({c:'package.package',a:'returnpackage'}) , this.refundPackageList)
                .then(res => {
                    if ( res.data.code == 200 ) {
                        this.confirmFormData.order_id = res.data.data.order_id || 0
                    } else {
                        return this.refundPackageError = res.data.msg;
                    }
                }).catch(_ => {
                    this.refundPackageError ='操作异常【1001】';
                    console.log(_)
                })

                if ( this.confirmFormData.order_id > 0 ) {
                    axios.post( Url({c:'package.package',a:'returnconfirm'}) , this.confirmFormData).then(res => {
                        this.refundPackageLoading = false
                        this.refundPackageError   = false
                    }).catch(_ => {
                        this.refundPackageError='操作异常【1002】';
                        console.log(_)
                    })
                }
            }
        },
        mounted(){
            this.doLoadUserView()
            this.doLoadRows()
        },
        watch : {
            activeTab ( last , now ) {
                this.doLoadRows()
            }
        }
    })
</script>
{/block}